<script setup lang="ts">
/*
 * @description: 头部组件
 * @fileName: DpTitle.vue
 * @params
 * @author: lxx
 * @date: 2025-04-15 11:17:55
 * @version: V1.0.0
 */
const props = withDefaults(
  defineProps<{
    title?: string
    num?: number
  }>(),
  {
    title: '管控单位数量'
  }
)
const count = ref(0)
watchEffect(() => {
  count.value = props.num || 0
})
</script>
<template>
  <div class="title-box flex-center-between">
    <div class="title-left-box">{{ title }}</div>
    <div class="title-right-box" v-if="count != 0">
      <hdty-dp-count-up :count="count" />
    </div>
    <img src="./images/title_bottom_line.png" />
  </div>
</template>
<style lang="scss" scoped>
.title-box {
  position: relative;
  padding: 12px 12px 8px;
  background: linear-gradient(to right, #0b2b89, transparent);
  .title-left-box {
    color: #00daff;
    font-size: 20px;
    letter-spacing: 3px;
    font-weight: 600;
  }

  .title-right-box {
    color: #fdc755;
    font-weight: 600;
  }

  img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 110px;
    transform: translateY(100%);
  }
}
</style>
